<template>
  <ul class="tabs flex bcl-mask mb-15">
    <li
      class="flex-1"
      v-for="(v, i) in props.tabs"
      :class="i === tabIndex ? 'active' : ''"
      :key="i"
      @click="emit('update:tabIndex', i), emit('change')"
    >
      {{ v }}
    </li>
  </ul>
</template>

<script setup>
const props = defineProps({
  tabs: {
    type: Array,
    default: () => [],
  },

  tabIndex: {
    type: Number,
    default: 0,
  },
})

console.log(props.tabs)

const emit = defineEmits('update:tabIndex', 'change')
</script>

<style lang="scss" scoped>
.tabs {
  text-align: center;
  border-radius: 100px;
  height: 40px;
  line-height: 40px;
  overflow: hidden;

  li {
    font-size: 15px;
    color: white;

    &.active {
      border-radius: 100px;
      background-color: var(--color-primary);
      color: var(--color-black);
    }
  }
}
</style>
